<template>
	<view>
		<view class="wrap">
			<view class="ml32 mr30">
				<!-- 1 -->
				<u-sticky>
					<view class=""><u-search placeholder="搜索" v-model="keyword" :showAction="false"></u-search></view>
				</u-sticky>

				<!-- 3 -->
				<view class="">
					<!--  -->
					<view class="mt32" v-for="(item, index) in GroupList" :key="index">
						<view class="wrap flex-align h108">
							<view class="mr18"><u-avatar :src="item.uavatar"></u-avatar></view>
							<view class="w590">
								<!-- ps28 -->
								<view class="flex ">
									<view class="title mr10">{{ item.ugroupNickName }}</view>
									<view class="num">（201）</view>
								</view>
								<!-- <u-line></u-line> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapState, //先导入mapState方法
	mapMutations,
	mapActions
} from 'vuex';
export default {
	data() {
		return {
			GroupList: [],
			src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
		};
	},
	onShow() {
		this.userGroupList();
	},
	computed: {
		...mapState('user', ['userInfo'])
	},
	methods: {
		async userGroupList(userId) {
			let re = await this.$API.usertoGroupApi.findUserGroupListById(this.userInfo.userId);
			this.GroupList = re;
		}
	}
};
</script>

<style lang="scss">
.w590 {
	width: 590rpx;
}
.title {
	// width: 590rpx;
	// height: 48rpx;
	font-size: 34rpx;
	// font-family: SFProText-Medium-, SFProText-Medium;
	font-weight: normal;
	color: #141414;
	// line-height: 44rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}
.num {
	// width: 100rpx;
	// height: 44rpx;
	font-size: 32rpx;
	// font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #a2a2a2;
	// line-height: 0rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}
</style>
